/**
  table 通用组件
*/
<template>
  <div class="table-wrapper">
    <!-- 搜索区域 search form -->
    <div v-if="this.$scopedSlots.search" ref="search-block" class="table-search">
      <el-card shadow="never"><slot name="search" /></el-card>
    </div>
    <!-- 表格区域
      标题  ---  tools
      table
      -----header----------
      -----context--?oper--
      ----------pager--
    -->
    <div class="table-box">
      <div class="oper">
        <!-- tools btn -->
        <TipBlock v-if="title" :tip="title" />
        <!-- <h1  class="table-title"></h1> -->
        <div class="tools"><slot name="tools" /></div>
      </div>
      <el-table
        ref="wxTable"
        v-loading="loading"
        :header-align="tableAlign"
        :header-cell-style="{ background: 'rgba(233,233,233,1)', color: 'rgba(0,0,0,1)', fontSize: '16px' }"
        v-bind="$attrs"
        :data="dataSource"
        highlight-current-row
        border
        :max-height="config['max-height']"
        style="width: 100%"
        :header-row-style="{ height: '60px' }"
        v-on="$listeners"
      >
        <el-table-column
          v-if="checkbox"
          :align="tableAlign"
          type="selection"
          width="55"
          v-bind="checkboxConf"
          :selectable="checkboxDisabledFn"
        />
        <template v-for="item of columns">
          <!-- jsx -->
          <!-- 对行权限进行校验 指令不支持 -->
          <item-cell v-if="checkPermission(item.permission || 'pre')" :key="item.dataIndex" :slots="$scopedSlots[item.dataIndex]" :context="item" :align="tableAlign">
            <template v-for="innerItem of item.columns">
              <item-cell :key="innerItem.dataIndex" :context="innerItem" :align="tableAlign" :slots="$scopedSlots[innerItem.dataIndex]" />
            </template>
          </item-cell>
        </template>
        <!-- 操作栏 -->
        <slot name="oper" />
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-if="pagination"
        v-bind="$attrs"
        :page-sizes="[10, 15, 30, 50, 100, 500, 1000]"
        layout="total, prev, pager, next, jumper"
        :current-page.sync="page"
        :total="total"
        :page-size="size"
        @size-change="(val) => $emit('update:size', val)"
        @current-change="(val) => $emit('update:page', val)"
      />
    </div>
    <slot />
  </div>
</template>

<script>
import TipBlock from '../TipBlock'
import ItemCell from './ItemCell'
const TABLE_ALIGEN = ['left', 'center', 'right']
import { checkPermission } from '@/utils/permission'
export default {
  name: 'WxTables',
  components: { ItemCell, TipBlock },
  props: {
    pagination: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    align: {
      type: Number,
      default: 1
    },
    loading: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    checkbox: {
      type: Boolean,
      default: false
    },
    checkboxDisabledFn: {
      type: Function,
      default: () => true
    },
    size: {
      type: Number,
      default: 15
    },
    checkboxConf: {
      type: Object,
      default: () => {}
    },
    tableHeightFixed: {
      type: Boolean,
      default: true
    },
    page: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      config: {
        'max-height': 0
      }
    }
  },
  computed: {
    tableAlign() {
      return TABLE_ALIGEN[this.align]
    }
  },
  created() {
    this.tableHeightFixed ? this.handleRecomputedHeight() : this.$delete(this.config, 'max-height')

    if (this.tableHeightFixed) {
      this.$once('hook:beforeMount', () => {
        window.addEventListener('resize', this.handleRecomputedHeight)
      })

      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('resize', this.handleRecomputedHeight)
      })
    }
  },
  methods: {
    checkPermission,
    handleRecomputedHeight() {
      if (this.$attrs.height) {
        this.config['max-height'] = this.$attrs.height
        return
      }
      // 40 20 20 20 60
      // 全屏高 - 头部 - 分页 - tableheader - oper - padding
      this.$nextTick(() => {
        const clientHeight = document.body.clientHeight - 50 - 30 - 60 - 56 - 20
        // search height - margin
        this.config['max-height'] = clientHeight - (this.$scopedSlots.search ? this.$refs['search-block'].clientHeight - 20 : -40)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @mixin pager-box() {
    height: 30px;
    width: 30px;
    min-width: 30px;
    border: 1px solid #dcdfe6 !important;
    color: #949191;
    font-size: 14px;
    border-radius: 5px;
    box-sizing: border-box;
  }
  .table-wrapper {
    .table-search {
      margin-bottom: 20px;
      /* padding: 20px 0; */
    }
    .table-box {
      /* border: 1px solid #eeeeee; */
      /* padding: 20px; */
      .tools {
        display: flex;
      }
      .oper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .table-title {
          margin: 0;
          color: #868282;
          font-size: 18px;
          font-weight: 500;
        }
      }
      ::v-deep .el-pagination {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10px;
        padding: 0;
        .el-pagination__sizes, .el-pagination__jump, .el-pagination__total {
          font-size: 14px;
        }
        .el-pager {
          .active {
            background: #409EFF;
            color: #ffffff;
          }
          li {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 5px;
            @include pager-box();
          }
        }
        .btn-next, .btn-prev {
          margin-left: 5px;
          padding: 0;
          @include pager-box();
          .el-icon {
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
